* {
	margin: 0;
}

header {
	width: 100%;
	height: 54px;
	line-height: 54px;
	text-align: center;
	color: #214B9F;
	font-size: 20px;
	background-color: rgba(0, 0, 0, .4);
	.back {
		position: absolute;
		left: 10px;
		color: #333;
		font-size: 16px;
	}
}

.commodity-list {
	width: 347px;
	margin: 14px;
	.item {
		width: 100%;
		height: 285px;
		margin-bottom: 10px;
		img {
			position: relative;
			width: 100%;
			z-index: 99;
		}
		.detail {
			border: 1px #ccc solid;
			width: 345px;
			height: 93px;
			position: relative;
			top: -5px;
			.name {
				margin: 5px 11px;
				font-size: 16px;
				color: #666;
			}
			.msg {
				margin: 0 11px;
				color: #a8a8a8;
				font-size: 13px;
			}
			.price {
				margin: 11px;
				color: #c21b27;
				font-size: 22px;
				.old-price {
					color: #a8a8a8;
					font-size: 16px;
					display: inline-block;
					text-decoration: line-through
				}
			}
			.to-trolly-icon {
				width: 40px;
				height: 36px;
				position: absolute;
				bottom: 10px;
				right: 10px;
				display: inline-block;
				background-image: url(../images/icon1@2x.png);
				background-size: 1200%;
				background-position: -384px -48px;
			}
		}
	}
}
.nav-XXX{
	width: 100%;
	height: 50px;
	line-height: 50px;
	color: #999;
	font-size: 16px;
	text-align: center;
}
.nav {
	width: 100%;
	height: 50px;
	background-color: #214B9F;
	position: fixed;
	bottom: 0px;
	ul{
		display: flex;
		justify-content: space-around;
		list-style: none;
		padding: 0;
		li{
			width: 40px;
			height: 42px;
			margin: 4px auto;
			font-size: 10px;
			// color: #fff;
			color: #cacaca;
			text-align: center;
			i{
				display: inline-block;
				width: 40px;
				height: 28px;
				margin-bottom:-4px;
				background-image: url(../images/icon1@2x.png);
				background-size: 1300%;
			}
			.icon-home{
				background-position: -1px 0;
			}
			.icon-commodity{
				background-position: -261px 0;
			}
			.icon-trolly{
				background-position: -103px 0;
			}
			.icon-my{
				background-position: -156px 0;
			}
		}
	}
}
